<template>
    <div class="ai-response-list-container">
        <div class="page-header">
            <h2>AI回复内容管理</h2>
        </div>

        <el-table :data="responseList" border stripe style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="prompt" label="用户提问" min-width="200" show-overflow-tooltip />
            <el-table-column prop="response" label="AI回复" min-width="300" show-overflow-tooltip />
            <el-table-column prop="modelName" label="模型名称" width="120" />
            <el-table-column prop="tokensUsed" label="Token数" width="100" />
            <el-table-column label="创建时间" width="180">
                <template #default="scope">
                    {{ formatDateTime(scope.row.createdAt) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="viewDetail(scope.row)">
                        查看详情
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteResponse(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" />
        </div>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import chatApi from '@/api/chat.js'

export default {
    name: 'AiResponseList',
    data() {
        return {
            responseList: [],
            loading: false,
            currentPage: 1,
            pageSize: 10,
            total: 0
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.loading = true

            // 构建请求参数
            const params = {
                page: this.currentPage,
                page_size: this.pageSize
            }

            // 调用API获取AI回复内容列表
            chatApi.getAiResponses(params)
                .then(response => {
                    if (response.code === 200) {
                        this.responseList = response.data.records || []
                        this.total = response.data.total || 0
                    } else {
                        ElMessage.error(response.message || '获取AI回复内容列表失败')
                    }
                })
                .catch(error => {
                    console.error('获取AI回复内容列表失败:', error)
                    ElMessage.error('获取AI回复内容列表失败')
                })
                .finally(() => {
                    this.loading = false
                })
        },
        handleSizeChange(size) {
            this.pageSize = size
            this.fetchData()
        },
        handleCurrentChange(page) {
            this.currentPage = page
            this.fetchData()
        },
        formatDateTime(dateTime) {
            if (!dateTime) return '-'
            const date = new Date(dateTime)
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
        },
        viewDetail(row) {
            this.$router.push({
                name: 'AiResponseDetail',
                params: { id: row.id }
            })
        },
        deleteResponse(row) {
            ElMessageBox.confirm('确认删除该AI回复内容吗？删除后将无法恢复', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                chatApi.deleteAiResponse(row.id)
                    .then(response => {
                        if (response.code === 200) {
                            ElMessage.success('删除成功')
                            this.fetchData()
                        } else {
                            ElMessage.error(response.message || '删除失败')
                        }
                    })
                    .catch(error => {
                        console.error('删除AI回复内容失败:', error)
                        ElMessage.error('删除AI回复内容失败')
                    })
            }).catch(() => {
                // 取消删除操作
            })
        }
    }
}
</script>

<style scoped>
.ai-response-list-container {
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style> 